<template>
  <div id="user-container">
    <Heade></Heade>
    <div class="sport">
      <div class="more-sport">
        <h2>我的运动</h2>
        <span>查看全部</span>
      </div>
      <Sport></Sport>
      <Sport></Sport>
      <Sport></Sport>
      <Sport></Sport>
      <Sport></Sport>
      <Sport></Sport>
    </div>
  </div>
</template>

<script>
import Heade from './Heade.vue'
import Sport from './Sport.vue'
export default {
  components: {
    Heade,
    Sport
  }
}
</script>

<style lang='less' scoped>
  #user-container {
    position: relative;
    background-color: rgb(245, 247, 249);
    .sport {
      padding: 13.8889rem 0 2.7778rem;
    }
    .more-sport {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 2.5rem;
      margin-top: 1.6667rem;
      span {
        color: rgb(161, 161, 182);
        font-size: .8889rem;
      }
    }
  }
</style>
